<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>WebSocket Logger</title>
    <link rel="stylesheet" th:href="@{/static/qrcodes.css}" />
    <link th:href="@{/static/boot-css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<div class = "pg_header">
    <span class="pg_dl" id="i77" th:align="center">数据实时展示</span>
</div>
<br><br><br>
<div>
    <form class="form-inline">
        <label>厂商名称</label><select  name="factoryId" id="fas" class="form-control" style="width: 20%">
    <option value="0">微盟云谷平台</option>
    <option th:each="c:${factoryList}"  th:value="${c.factoryId}" th:text="${c.factoryName}"></option>
</select>
    <input type="button" class="btn-primary" value="展示" onclick="sizewindow()">
    </form>
</div>
<!--<div id="log-container2" style="overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
    <table id="log-table2">
        <tr>
            <td width="100px"><b>厂商名称</b></td>
            <td width="200px" align="center"><b>生产时间</b></td>
            <td width="100px" ><b>生产总数</b></td>
           &lt;!&ndash; <td width="100px" ><b>失败总数</b></td>&ndash;&gt;
        </tr>
        <tr>
            <td width="100px" id="td1"></td>
            <td width="200px" id="td2"></td>
            <td width="100px" id="td3"></td>
            &lt;!&ndash;<td width="100px" id="td4"></td>&ndash;&gt;
        </tr>
    </table>

</div>-->

<!--<div id="log-container" style="overflow-y: scroll; background: #333; color: #aaa; padding: 10px; ">
    <table id="log-table">
        <tr>
            <td width="100px"><b>厂商名称</b></td>
            <td width="200px" align="center"><b>生产时间</b></td>
            <td width="200px" align="center"><b>设备编号</b></td>
            <td width="100px" align="center"><b>二维码编号</b></td>
        </tr>
        <tr>
            <td width="100px"></td>
            <td width="200px"></td>
            <td width="200px"></td>
            <td width="100px"></td>
        </tr>
    </table>
</div>-->
</body>

<!--<script>
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        var wsUrl = "ws://"+ window.location.host+"/antifake/websocket/2,"+$("#factoryIds").val();
        socket = new WebSocket(wsUrl);
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            var myobj=eval(msg.data);
            $("#log-container2").css("height",myobj.length*600);
            for(var i=0;i<myobj.length;i++){
                var tb = document.getElementById("log-table2");
                var tr = tb.insertRow(1);
                tr.style.cssText = tb.rows[1].style.cssText;
                var td1 = tr.insertCell();
                var td2 = tr.insertCell();
                var td3 = tr.insertCell();
                var td4 = tr.insertCell();
                td1.innerHTML = myobj[i].factoryName;
                td2.innerHTML = myobj[i].times.substring(0,myobj[i].times.length-2);
                td3.innerHTML = myobj[i].successNum;
                td4.innerHTML = myobj[i].failNum;
            }
            //$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
            //发现消息进入    开始处理前端触发逻辑

        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
    }
</script>-->

<!--<script>
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        var wsUrl = "ws://"+ window.location.host+"/antifake/websocket/1,"+$("#factoryIds").val();
        socket = new WebSocket(wsUrl);
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            var myobj=eval(msg.data);
            $("#log-container2").css("height",myobj.length*40);
            for(var i=0;i<myobj.length;i++){
                $("#td1").html(myobj[i].factoryName) ;
                $("#td2").html(myobj[i].times.substring(0,myobj[i].times.length-2)) ;
                $("#td3").html(myobj[i].successNum) ;
               /* $("#td4").html(myobj[i].failNum);*/
            }
            //$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
            //发现消息进入    开始处理前端触发逻辑

        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
    }
</script>-->





<script>

    function sizewindow() {
        window.open("/antifake/dataStatistics/factoryList?factoryId="+ $("#fas").val());
    }


   /* function searchs(){
        window.location.href="http://"+window.location.host+"/antifake/dataStatistics/index?factoryId="+ $("#fas").val();
    }
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        var wsUrl = "ws://"+ window.location.host+"/antifake/websocket/2,"+$("#factoryIds").val();
        socket = new WebSocket(wsUrl);
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            var myobj=eval(msg.data);
            $("#log-container").css("height",myobj.length*200);
            var tb = document.getElementById("log-table");
            var tr = tb.insertRow(1);
            tr.style.cssText = tb.rows[1].style.cssText;
            var td1 = tr.insertCell();
            var td2 = tr.insertCell();
            var td3 = tr.insertCell();
            var td4 = tr.insertCell();
            td1.innerHTML = myobj[0].factoryName;
            td2.innerHTML = myobj[0].times.substring(0,myobj[0].times.length-2);
            td3.innerHTML = myobj[0].deviceId;
            td4.innerHTML = myobj[0].caseId;
            //$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
            //发现消息进入    开始处理前端触发逻辑

        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
    }*/
</script>

</body>
</html>
